<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <meta charset="UTF-8">
    <link  rel="stylesheet" type="text/css"  href="css/common.css">
    <link  rel="stylesheet" type="text/css"  href="css/goodsdetail.css">
    <link rel="icon" href="img/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />
</head>
<body class="goodsdetail bg" id="goodsDetail">
<!--头部-->
<header class="nav" id="nav">
        <a  class="active"><span>商品</span></a>
        <a><span>详情</span></a>
</header>

<!--轮播图-->
<section class="lun">
    <img src="img/detail1.jpg">
</section>

<section class="detail bg-white">
    <h1>诺心×须尽欢联名软心冰淇淋·全明星礼盒<i></i></h1>
    <p class="prize"><span>￥166</span><span>￥106</span></p>
    <a class="open-ship">
        <div class="box">
            <p>aha会员尊享多重礼遇</p>
            <p>开通仅¥99 预计可省¥358</p>
        </div>
        <span>￥99开通</span>
    </a>
    <a class="range">
        已选规格: 全明星礼盒
    </a>
</section>


<div class="description  bg-white">
    <span class="tip">立减</span>
    <p>清凉上新 低至13.9元/支</p>
</div>

<!--商品描述-->
<div class="goods-desc">
    <img src="img/1.jpg">
</div>


<!--加入购物车弹层-->
<div class="shopcar-box" id="shopCarbox">
    <div class="cover"></div>
    <div class="content bg-white">
        <!--取消按钮-->
        <i class="cancel" id="Cancel"></i>
        <p class="prize"><span>￥166</span><span>￥106</span></p>
        <div class="des" id="des">
            <a>全明星礼盒</a>
            <a class="active">拯救不</a>
            <a>雪域巧克力CP礼盒</a>
            <a>雪域杨枝甘露CP礼盒</a>
            <a>雪域奶茶CP礼盒</a>
        </div>
        <div class="btn-box" id="carBtnBox">
            <a>立即购买</a>
            <a class="active">加入购物车</a>
        </div>
    </div>
</div>
<!--底部-->
<footer class="footer">
    <div class="tab-bar">
        <a href="index.html"></a>
        <a></a>
        <a></a>
    </div>
    <a class="add-shop-car" id="addCar">加入购物车</a>
</footer>
<script src="js/jquery1.42.min.js"></script>
<script>
    $(function(){

        /*导航切换*/
       $("#nav a").click(function () {
            $(this).siblings().removeClass('active') ;
            $(this).addClass("active") ;
       })

        /*屏幕高度超过一屏 显示导航nav*/
        //1.获取可视区域高度
        var H = document.documentElement.clientHeight;
        var H1 = $(window).height() ;
        $(document).scrollTop();


        $("#goodsDetail").scroll(function() {
            var H = $(window).height() ; //一屏幕的高度
            var offSetH = $('#goodsDetail').scrollTop();
            if(offSetH > H - 50){
                $("#nav").addClass('animation') ;
            }else{
                $("#nav").removeClass('animation') ;
            }
        });

        /*购物车 选择分类*/
        $("#des a").toggle(function(){
                 $(this).addClass('active');
            },function(){
                $(this).removeClass('active') ;
         });

        /*购物车 取消按钮 弹层隐藏*/
        $("#Cancel").click(function(){
            $("#shopCarbox").removeClass('animation') ;
        })

        $("#shopCarbox .cover").click(function () {
            $("#shopCarbox").removeClass('animation') ;
        })

        /*购物车 加入 弹层显示*/
        $('#addCar').click(function(){
            $("#shopCarbox").addClass('animation') ;
        })

        /*弹出层 购物车切换*/
        $("#carBtnBox a").click(function(){
            $(this).siblings().removeClass('active') ;
            $(this).addClass('active') ;
        })
    });
</script>
</body>
</html>